<template>
 
    <el-table
      :data="tableData"
      :height="height"
      :max-height="maxHeight"
      :show-header="showHeader"
      :key="updateKey"
    >
      <el-table-column
        v-for="item in tableColumns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
      >
        <template v-if="item.slot" #default="{ row, column, $index }">
          <slot
            :name="item.slot"
            :row="row"
            :column="column"
            :$index="$index"
          />
        </template>
      </el-table-column>
    </el-table>

 
</template>
<script setup lang="ts">
import { onUpdated, reactive, ref } from "vue";
defineOptions({
  name: "aigcTable",
});
type ITableColumns = {
  slot?: string;
  prop: string;
  label: string;
};
withDefaults(
  defineProps<{

    tableData: Array<any>;
    tableColumns: Array<ITableColumns>;
    showHeader?: boolean;
  
    maxHeight?: number | string;
    height?: number | string;
 
  }>(),
  {
    autoscroll: false,
    showHeader: false,
    height:300
  }
);
const updateKey = ref(0);

onUpdated(() => {
  updateKey.value = updateKey.value++;
  console.log(updateKey.value);
});
</script>
<style lang="scss" scoped>

</style>
